<template>
  <div>
    <!-- <div class="table-wrap">
      <div class="table-top">
        <div class="table-name flex-center">姓名</div>
        <div class="table-sex flex-center">性别</div>
        <div class="table-lv flex-center">权限级别</div>
        <div class="table-edit flex-center">操作</div>
      </div>
      <div class="table-item" v-for="item in dataChangeSex" :key="item.id">
        <div class="table-name flex-center">{{ item.name }}</div>
        <div class="table-sex flex-center">{{ item.sex }}</div>
        <div class="table-lv flex-center">{{ item.lv }}</div>
        <div class="table-edit flex-center">
          <a class="item-btn" href="#" @click="handleDeleteItem(item)">删除</a>
          <a class="item-btn" href="#" @click="editText(item)">编辑</a>
        </div>
      </div>
    </div> -->
    <a-table bordered :data-source="dataChangeSex" :columns="columns">
      <!-- <template slot="name" slot-scope="text, record">
        <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
      </template> -->
      <template slot="operation" slot-scope="text, record">
        <a-button @click="handleDeleteItem(record)">删除</a-button>
        <a-button @click="editText(record)">编辑</a-button>

        <a-button>
          <router-link :to="`/detail?userid=${record.id}`"
            >进入详情
          </router-link></a-button
        >

       
      </template>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    key: "0",
    title: "姓名",
    dataIndex: "name",
    width: "30%",
    scopedSlots: { customRender: "name" },
  },
  {
    key: "1",
    title: "性别",
    dataIndex: "sex",
    width: "20%",
  },
  {
    key: "2",
    title: "权限分配",
    dataIndex: "lv",
    width: "20%",
  },
  {
    key: "3",
    title: "操作",
    dataIndex: "operation",
    width: "20%",
    scopedSlots: { customRender: "operation" },
  },
];
export default {
  name: "WorkspaceJsonTablebody",
  props: {
    dataChangeSex: Array,
    handleDeleteItem: Function,
    editText: Function,
  },
  data() {
    return {
      columns,
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.filter-wrap {
  padding: 10px;
}
.item-btn {
  color: deepskyblue;
  margin-right: 10px;
}
.filter-line {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.label {
  display: flex;
  padding-right: 5px;
  justify-content: flex-end;
}
.table-item {
  display: flex;
  align-items: center;
}
.table-top {
  display: flex;
  background: #ddd;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-name {
  flex: 4;
}
.table-sex {
  flex: 3;
}
.table-lv {
  flex: 3;
}
.table-edit {
  flex: 5;
}
</style>